<script setup lang="ts">
import type { Kingdom } from '../../../types/zhu-family';

import { kingdoms } from '../../../mock/zhu-dynasty/members';

function getCoverGradient(type: string) {
  return type === 'imperial'
    ? 'linear-gradient(135deg, #faad14 0%, #d48806 100%)'
    : 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
}

function viewKingdomDetail(kingdom: Kingdom) {
  console.log('查看藩国详情:', kingdom);
}
</script>

<template>
  <div class="kingdom-page">
    <a-row :gutter="16">
      <a-col
        v-for="kingdom in kingdoms"
        :key="kingdom.id"
        :span="8"
        style="margin-bottom: 16px"
      >
        <a-card hoverable @click="viewKingdomDetail(kingdom)">
          <template #cover>
            <div
              class="kingdom-cover"
              :style="{ background: getCoverGradient(kingdom.type) }"
            >
              <h2>{{ kingdom.name }}</h2>
              <p>{{ kingdom.capital }}</p>
            </div>
          </template>
          <a-card-meta :description="kingdom.description">
            <template #title>
              <a-space>
                <span>{{ kingdom.founder }}</span>
                <a-tag :color="kingdom.type === 'imperial' ? 'gold' : 'blue'">
                  {{ kingdom.type === 'imperial' ? '帝都' : '藩国' }}
                </a-tag>
              </a-space>
            </template>
          </a-card-meta>
          <a-divider />
          <a-row>
            <a-col :span="12">
              <a-statistic
                title="国库"
                :value="kingdom.treasury / 10000"
                suffix="万两"
              />
            </a-col>
            <a-col :span="12">
              <a-statistic
                title="人口"
                :value="kingdom.population / 10000"
                suffix="万人"
              />
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="scss">
.kingdom-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  color: white;

  h2 {
    margin: 0 0 8px;
    font-size: 24px;
    color: white;
  }

  p {
    margin: 0;
    opacity: 0.9;
  }
}
</style>
